<template>
	<a-modal :confirm-loading="handing" width="800px" v-model:open="showForm" @ok="submit">
		<a-form ref="form" :model="formData" :rules="rules" :labelCol="{ span: 5 }" :wrapper-col="{ span: 16, offset: 1 }">
			<a-form-item name="title" label="标题">
				<a-input v-model:value="formData.title" />
			</a-form-item>
			<a-form-item name="type" label="类型">
				<a-select v-if="editAble.includes(formData.type)" v-model:value="formData.type" :options="filter.options(types)" />
				<span>{{types[formData.type] ?? '普通'}}</span>
			</a-form-item>
			<a-form-item name="content" label="内容">
				<editor v-model:value="formData.content" />
			</a-form-item>
		</a-form>
	</a-modal>
</template>
<script lang="ts">
import {page, form} from "@/mixins"

export default {
	mixins: [page, form],
	data() {
		return {
			showForm: false as boolean,
			formPath: 'help',
			formData: {
				id: undefined,
				title: '' as string,
				type: 0 as number,
				content: '' as string
			},
			rules: {
			  title: [{ required: true, trigger: 'change' }],
			  type: [{ required: true, trigger: 'change', message: '请选择类型' }],
				content: [{ required: true, trigger: 'change' }],
			},
			editAble: [],
			types: {'edu-org': '学历-学科查询', 'edu-rule': '学历-报考条件', 'edu-time': '学历-报考时间', 'edu-major': '学历-专业查询','constructor-org': '二建-机构专业', 'constructor-rule': '二建-报考条件', 'constructor-time': '二建-报考时间', 'constructor-major': '二建-专业查询'}
		}
	},
	methods: {
		add() {
			Object.assign(this.formData, {
				id: undefined,
				title: '',
				type: '',
				content: ''
			})
			this.showForm = true;
		},
		edit(record : object) {
			Object.assign(this.formData, record);
			this.showForm = true
		},
		afterSubmit(data: object){
			this.$emit('change', data);
			this.showForm = false
		}
	}
}
</script>